<template>
  <div>
    <fuyongdetaill :detaill="'location/detaill'" @addFrom="addFrom" @removeList="removeList">
      <div class="button">
        <el-button round>下载库位模板</el-button>
        <el-button round>导入库位信息</el-button>
      </div>
      <el-table
        :data="queryList"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="70" />
        <el-table-column
          prop="warehouseName"
          label="所属仓库"
          width="180"
        />
        <el-table-column
          prop="areaCode"
          label="库区编号"
          width="180"
        />
        <el-table-column
          prop="areaName"
          label="库区名称"
          width="180"
        />
        <el-table-column
          prop="code"
          label="库位编号"
          width="180"
        />
        <el-table-column
          prop="name"
          label="库位名称"
          width="180"
        />
        <el-table-column
          prop="wendu"
          label="温度类型"
          width="180"
        />
        <el-table-column
          prop="xingtai"
          label="承重类型"
          width="180"
        />
        <el-table-column
          prop="leixing"
          label="用途属性"
          width="180"
        />
        <el-table-column
          prop="tingyong"
          label="停用状态"
          width="180"
        />
        <el-table-column
          prop="createTime"
          label="更新时间"
          width="180"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template #default="{row}">
            <el-link type="primary" @click="editList(row)">编辑</el-link>
            <el-link type="primary" @click="deactivate(row)">{{ row.tingyong === '停用' ? '启用' : '停用' }}</el-link>
            <el-link type="primary">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="searchFrom.current"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="searchFrom.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </fuyongdetaill>
    <!-- 停用对话框 -->
    <el-dialog
      :title="isBoll"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>确定要{{ isBoll }}库区：{{ row.name }} 吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSearch">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import fuyongdetaill from '@/components/fuyong/fuyongdetaill.vue'
import { searchLoaction, editlocationList } from '@/api/manage-base-info.js'
export default {
  components: { fuyongdetaill },
  data() {
    return {
      row: {},
      status: null,
      dialogVisible: false,
      searchFrom: {
        size: 10,
        current: 1,
        status: null,
        areaName: '',
        name: ''
      },
      queryList: [],
      total: null
    }
  },
  computed: {
    isBoll() {
      return this.row.tingyong === '停用' ? '确定启用' : '确定停用'
    }
  },
  created() {
    this.getsearchLoaction()
  },
  methods: {
    addFrom(val) {
      this.searchFrom.areaName = val.warehouseName
      this.searchFrom.name = val.name
      this.searchFrom.status = val.status
      this.getsearchLoaction()
    },
    removeList() {
      this.searchFrom.size = 10
      this.searchFrom.current = 1
      this.searchFrom.status = null
      this.searchFrom.areaName = ''
      this.searchFrom.name = ''
      this.getsearchLoaction()
    },
    // 搜索数据
    async getsearchLoaction() {
      const res = await searchLoaction(this.searchFrom)
      this.queryList = res.data.records
      this.queryList.forEach(item => {
        if (item.temperatureType === 'LC') {
          item.wendu = '冷藏'
        } else if (item.temperatureType === 'CW') {
          item.wendu = '常温'
        } else {
          item.wendu = '恒温'
        }
        if (item.bearingType === 'ZX') {
          item.xingtai = '重型'
        } else if (item.bearingType === 'OX') {
          item.xingtai = '中型'
        } else {
          item.xingtai = '轻型'
        }
        if (item.useType === 'RKHCQ') {
          item.leixing = '入库缓存区'
        } else if (item.useType === 'CKHCQ') {
          item.leixing = '出库缓存区'
        } else if (item.useType === 'CCQ') {
          item.leixing = '存储区'
        } else if (item.useType === 'FJQ ') {
          item.leixing = '分拣区'
        } else {
          item.leixing = '质检区'
        }
        if (item.status === 0) {
          item.tingyong = '停用'
        } else {
          item.tingyong = '启用'
        }
      })
      this.total = res.data.total - 0
    },
    // 分页区域
    handleSizeChange(newSize) {
      this.searchFrom.size = newSize
      this.getsearchLoaction()
    },
    handleCurrentChange(newNum) {
      this.searchFrom.current = newNum
      this.getsearchLoaction()
    },
    // 编辑
    editList(row) {
      this.$router.push({ name: 'location/detaill', params: { id: row.id }})
    },
    // 停用
    deactivate(row) {
      this.row = row
      console.log(this.row)
      this.dialogVisible = true
      if (row.status === 1) {
        this.status = 0
      } else {
        this.status = 1
      }
    },
    async  editSearch() {
      await editlocationList({ id: this.row.id, status: this.status })
      this.getsearchLoaction()
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.button{
  position: absolute;
  right: 100px;
  top: 200px;
}
</style>
